<template>
	<div class='system-edit-dept-container'>
		<el-dialog title='修改部门' v-model='isShowDialog' width='769px'>
			<el-form :model='ruleForm' size='default' label-width='90px'>
				<el-row :gutter='35'>
					<el-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24' class='mb20'>
						<el-form-item label='上级部门'>
							<el-cascader
								:options='deptData'
								:props="{ checkStrictly: true, value: 'id', label: 'name' }"
								placeholder='请选择部门'
								clearable
								class='w100'
								@change='onCascaderChange'
								v-model='deptLevel'
							>
								<template #default='{ node, data }'>
									<span>{{ data.name }}</span>
									<span v-if='!node.isLeaf'> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='部门名称'>
							<el-input v-model='ruleForm.name' placeholder='请输入部门名称' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='负责人'>
							<el-input v-model='ruleForm.person' placeholder='请输入负责人' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='手机号'>
							<el-input v-model='ruleForm.phone' placeholder='请输入手机号' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='邮箱'>
							<el-input v-model='ruleForm.email' placeholder='请输入' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='排序'>
							<el-input-number v-model='ruleForm.sort' :min='0' :max='999' controls-position='right' placeholder='请输入排序'
															 class='w100' />
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='部门状态'>
							<el-switch v-model='ruleForm.status' inline-prompt active-text='启' inactive-text='禁'></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24' class='mb20'>
						<el-form-item label='部门描述'>
							<el-input v-model='ruleForm.describes' type='textarea' placeholder='请输入部门描述' maxlength='150'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class='dialog-footer'>
					<el-button @click='onCancel' size='default'>取 消</el-button>
					<el-button type='primary' @click='onSubmit' size='default'>修 改</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang='ts'>
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { useDeptApi } from '/@/api/dept';
import { toRaw } from '@vue/reactivity';


interface DeptSate {
	isShowDialog: boolean;
	ruleForm: EditDataRow;
	deptLevel: Array<number>;
	deptData: Array<GetDataRow>;
}

export default defineComponent({
	name: 'systemEditDept',
	setup() {
		const state = reactive<DeptSate>({
			isShowDialog: false,
			ruleForm: {
				id: 0,
				pid: '',
				name: '',
				describes: '',
				phone: '',
				person: '',
				email: '',
				sort: 0,
				status: true,
			},
			deptLevel: [],
			deptData: [], // 部门数据
		});
		// 打开弹窗
		const openDialog = (row: GetDataRow) => {
			state.deptLevel = row.cascadesIds;
			state.ruleForm = row;
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = async () => {
			await useDeptApi().edit(state.ruleForm);
			closeDialog();
		};
		// 初始化部门数据
		const initTableData = async () => {
			state.deptData = await useDeptApi().getTree() as any;
		};
		const onCascaderChange = (value: string) => {
			try {
				let length = value.toString().split(',').length;
				state.ruleForm.pid = value.toString().split(',')[length - 1];
			} catch (e) {
				state.ruleForm.pid = '';
			}
			console.log(state.ruleForm.pid);
		};
		// 页面加载时
		onMounted(() => {
			initTableData();
		});
		return {
			onCascaderChange,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>
